<template>
  <view class="page">
    <u-navbar @leftClick="navLeftClick" :fixed="false" title="实名认证" placeholder bgColor="#fff"></u-navbar>
    <view class="content">
      <image style="width: 148rpx;height: 148rpx;margin-bottom: 30rpx;" src="../../static/my/realName.png" />
      <view class="u-font-28 u-m-b-44">为了保障您的交易安全，请完成实名认证</view>
      <u--input
        placeholder="请输入真实姓名"
        border="surround"
        :customStyle="{width: '654rpx', height: '100rpx'}"
        v-model="form.realName"
        maxlength="10"
        class="u-m-b-20"
      ></u--input>
      <u--input
        placeholder="请输入身份证号"
        type="idCard"
        border="surround"
        :customStyle="{width: '654rpx', height: '100rpx'}"
        v-model="form.idCard"
        maxlength="18"
      ></u--input>
      <view class="btn" @click="subRealName">提交认证</view>
    </view>
  </view>
</template>

<script>
import { realName, getUserInfo } from '@/api/index'

export default {
  data() {
    return {
      form: {},
      userInfo: {},
    };
  },
  onLoad() {
    this.userInfo = uni.getStorageSync('userInfo')
  },
  methods: {
    subRealName() {
      const that = this
      if(!this.form.realName || !this.form.idCard) {
        uni.showToast({
          title: '请输入姓名或身份证号',
          icon: 'none',
          mask: true
        })
        return
      }
      if(!uni.$u.test.idCard(this.form.idCard)) {
        uni.showToast({
          title: '请输入正确的身份证号',
          icon: 'none',
          mask: true
        })
        return
      }
      const parameter = {
        ...this.form,
        userId: this.userInfo.userId
      }
      realName(parameter).then(res => {
        uni.showToast({
          icon: 'none',
          title: '实名认证成功'
        })
        getUserInfo({}).then(res => {
          uni.setStorageSync('userInfo', {...res.user, roles: res.roles})
        })
        setTimeout(() => {
          that.redirectTo('/pages/my/withdraw')
        }, 1000)
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .content {
    width: 702rpx;
    padding: 42rpx 24rpx 58rpx;
    background-color: #fff;
    border-radius: 12rpx;
    margin: 0 auto;
    margin-top: 12rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .btn {
      margin: 0 auto;
      margin-top: 120rpx;
      width: 440rpx;
      height: 90rpx;
      line-height: 90rpx;
      text-align: center;
      background: #56CB03;
      border-radius: 200rpx 200rpx 200rpx 200rpx;
      border: 2rpx solid #56CB03;
      font-size: 28rpx;
      color: #FFFFFF;
    }
  }
}
</style>
